<template>
  <el-card class="box-card">
    <div class="icon-container">
      <el-icon color="rgba(255, 255, 255, 0.7)">
        <Refresh @click="flip" />
      </el-icon>
    </div>
    <div class="yi-yan" :style="{'margin-top':yiYanMarginTop+'px'}">
      <div class="left">『</div>
      <div class="yi-yan-text">{{yiYan}}</div>
      <div class="right">』</div>
    </div>
    <div class="from">{{from}}</div>
  </el-card>
</template>

<script>
import {
  Refresh
} from '@element-plus/icons-vue'
import axios from 'axios'

export default {
  name: "YiYan",
  props: {
    flipFlag: Boolean
  },
  components: {
    Refresh
  },
  data() {
    return {
      intervalId: '',
      yiYanMarginTop: 0,
      yiYan: '',
      from: ''
    }
  },
  mounted() {
    this.getYiYan()
  },
  watch: {
    flipFlag(val) {
      if (val) {
        this.getYiYan()
        this.intervalId = setInterval(() => {
          this.getYiYan()
        }, 1000 * 60 * 2)
      } else {
        clearInterval(this.intervalId)
      }
    }
  },
  methods: {
    getYiYan() {
      const url = 'https://v1.hitokoto.cn/?c=d&c=i&c=k&lang=cn'
      axios.get(url).then((data) => {
        this.yiYan = data.data.hitokoto
        this.from = '—— ' + (data.data.from_who == null ? '' : data.data.from_who) + '「' + data.data.from + '」'
        this.$nextTick(() => {
          const height = document.getElementsByClassName('yi-yan')[0].clientHeight + 19 - 10
          const marginTop = (228 - 40 - height) / 2
          this.yiYanMarginTop = marginTop
        })
      })
    },
    flip() {
      this.$emit('flip')
    },
  }
}
</script>

<style scoped>
.box-card {
  width: 400px;
  height: 228px;
  border: none;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}
:deep(.el-card__body) {
  height: 188px;
}
.icon-container {
  float: right;
  margin-top: -10px;
  margin-right: -10px;
  cursor: pointer;
}
.icon:hover {
  color: rgba(255, 255, 255, 0.3);
}
.yi-yan {
  position: relative;
  padding: 20px 0;
  font-size: 24px;
}
.left {
  position: absolute;
  left: 0;
  top: 25px;
}
.yi-yan-text {
  padding: 20px 20px;
  text-align: left;
  text-indent: 2em;
}
.right {
  position: absolute;
  right: 0;
  bottom: 25px;
}
.from {
  text-align: right;
  margin-top: -10px;
}
</style>